<template>
  <div>
    <div class="container">
      <div class="charts"><channelCharts :channelData="channelData"></channelCharts></div>
      <div class="charts"><activityCharts :activityData="activityData"></activityCharts></div>
      <br>
    </div>
    <h2>渠道统计报表</h2>
    <channelTable></channelTable>
  </div>

</template>

<script>
import { getCustomerChannelData, getCustomerActivityData } from '@/api/index/index1'
import activityCharts from '../components/avtivityCharts.vue'
import channelCharts from '../components/channelCharts.vue'
import channelTable from '../tables/channelTable'
export default {
  components: {
    activityCharts, channelCharts, channelTable
  },
  data () {
    return {
      channelData: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      activityData: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' }
      ]
    }
  },
  mounted () {
    getCustomerChannelData().then(res => {
      this.channelData = res.data
    })
    getCustomerActivityData().then(res => {
      this.activityData = res.data
    })
  }
}
</script>

<style>
.container{
  display: flex;
  margin: 0 auto;
}
.charts{
  width: 50%;
}

</style>


